<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 饮食指南</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: white;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 10px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f5f5f5;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 57px);
                overflow-y: auto;
                padding-bottom: 10px;
            }
            .phase-tabs {
                display: flex;
                background-color: #ffffff;
                padding: 10px 16px;
                overflow-x: auto;
                white-space: nowrap;
                border-bottom: 1px solid #f5f5f5;
            }
            .phase-tab {
                padding: 8px 16px;
                margin-right: 10px;
                border-radius: 20px;
                font-size: 14px;
                color: #666;
                background-color: #f5f5f5;
            }
            .phase-tab.active {
                background-color: #ff9fb5;
                color: white;
            }
            .section-title {
                font-size: 16px;
                font-weight: 600;
                margin: 16px 16px 12px;
                color: #333;
            }
            .food-category {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 16px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .category-header {
                display: flex;
                align-items: center;
                padding: 14px 16px;
                border-bottom: 1px solid #f5f5f5;
            }
            .category-icon {
                width: 36px;
                height: 36px;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 12px;
                font-size: 18px;
                color: white;
            }
            .category-name {
                font-size: 16px;
                font-weight: 500;
            }
            .food-list {
                padding: 12px 16px;
            }
            .food-item {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f8f8f8;
            }
            .food-item:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }
            .food-image {
                width: 50px;
                height: 50px;
                border-radius: 8px;
                object-fit: cover;
                margin-right: 12px;
            }
            .food-info {
                flex: 1;
            }
            .food-name {
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 4px;
            }
            .food-desc {
                font-size: 12px;
                color: #999;
                line-height: 1.4;
            }
            .tag-good {
                color: #4caf50;
            }
            .tag-bad {
                color: #ff5252;
            }
            .tag-tip {
                display: inline-block;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 10px;
                margin-bottom: 4px;
            }
            .bg-light-green {
                background-color: rgba(76, 175, 80, 0.1);
            }
            .bg-light-red {
                background-color: rgba(255, 82, 82, 0.1);
            }
            .nutrition-tip {
                background-color: #fff8e6;
                border-radius: 8px;
                padding: 12px 16px;
                margin: 16px;
                display: flex;
                align-items: center;
            }
            .tip-icon {
                color: #ffc107;
                font-size: 24px;
                margin-right: 12px;
            }
            .tip-content {
                font-size: 13px;
                line-height: 1.5;
                color: #666;
            }
            .search-bar {
                display: flex;
                align-items: center;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 8px 12px;
                margin: 10px 16px;
            }
            .search-icon {
                color: #999;
                margin-right: 8px;
            }
            .search-input {
                background: transparent;
                border: none;
                outline: none;
                font-size: 14px;
                color: #333;
                width: 100%;
            }
            .nutrient-card {
                background: #fff;
                border-radius: 12px;
                margin: 0 16px 16px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .nutrient-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                border-bottom: 1px solid #f0f0f0;
            }
            .nutrient-title {
                display: flex;
                align-items: center;
            }
            .nutrient-title-icon {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 10px;
                color: white;
            }
            .nutrient-name {
                font-size: 16px;
                font-weight: 500;
            }
            .nutrient-toggle {
                color: #999;
                font-size: 18px;
            }
            .nutrient-body {
                padding: 16px;
                display: none;
            }
            .nutrient-body.active {
                display: block;
            }
            .nutrient-info {
                display: flex;
                margin-bottom: 12px;
            }
            .nutrient-label {
                width: 80px;
                font-size: 13px;
                color: #666;
            }
            .nutrient-value {
                flex: 1;
                font-size: 13px;
                color: #333;
            }
            .food-source-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 8px;
            }
            .food-source-item {
                display: flex;
                align-items: center;
                background: #f5f5f5;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
            }
            .food-source-icon {
                font-size: 10px;
                margin-right: 4px;
                color: #ff9fb5;
            }
            .importance-badge {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 10px;
                font-size: 11px;
                margin-left: 8px;
                color: white;
            }
            .importance-high {
                background-color: #f44336;
            }
            .importance-medium {
                background-color: #ff9800;
            }
            .importance-normal {
                background-color: #4caf50;
            }
            .progress-bar {
                height: 6px;
                background-color: #f0f0f0;
                border-radius: 3px;
                margin: 8px 0;
                overflow: hidden;
            }
            .progress-fill {
                height: 100%;
                border-radius: 3px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left mr-4"></i>
                    <h1 class="text-lg font-medium">饮食指南</h1>
                </div>
                <i class="fas fa-ellipsis-v"></i>
            </div>

            <!-- 阶段选择 -->
            <div class="phase-tabs">
                <div class="phase-tab active">备孕期</div>
                <div class="phase-tab">孕早期</div>
                <div class="phase-tab">孕中期</div>
                <div class="phase-tab">孕晚期</div>
                <div class="phase-tab">产后恢复</div>
            </div>

            <!-- 搜索栏 -->
            <div class="search-bar">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索食物..." />
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 营养小贴士 -->
                <div class="nutrition-tip">
                    <div class="tip-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <div class="tip-content">
                        备孕期饮食应增加富含叶酸的食物，少吃煎炸食品，避免酒精和咖啡因，确保优质蛋白质的摄入。
                    </div>
                </div>

                <!-- 推荐食物 -->
                <h2 class="section-title">推荐食用</h2>

                <div class="food-category">
                    <div class="category-header">
                        <div class="category-icon" style="background-color: #4caf50">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="category-name">富含叶酸的食物</div>
                    </div>
                    <div class="food-list">
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1628689469838-524a4a973b8e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHNwaW5hY2h8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
                                alt="菠菜"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-green">叶酸含量高</div>
                                <div class="food-name">菠菜</div>
                                <div class="food-desc">每100克含叶酸约194微克，同时富含铁、钙等矿物质。</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1459411621453-7b03977f4bfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YnJvY2NvbGl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
                                alt="西兰花"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-green">叶酸含量高</div>
                                <div class="food-name">西兰花</div>
                                <div class="food-desc">每100克含叶酸约108微克，同时富含维生素C和钙。</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1603431514220-8f3b8ad869b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bGVudGlsc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
                                alt="豆类"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-green">叶酸含量高</div>
                                <div class="food-name">豆类(扁豆、鹰嘴豆)</div>
                                <div class="food-desc">每100克含叶酸约180微克，同时富含植物蛋白和纤维。</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="food-category">
                    <div class="category-header">
                        <div class="category-icon" style="background-color: #ff9800">
                            <i class="fas fa-egg"></i>
                        </div>
                        <div class="category-name">优质蛋白质</div>
                    </div>
                    <div class="food-list">
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1516684732162-798a0062be99?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZWdnc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
                                alt="鸡蛋"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-green">优质蛋白</div>
                                <div class="food-name">鸡蛋</div>
                                <div class="food-desc">富含优质蛋白和卵磷脂，对胎儿神经系统发育有益。</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1594221708779-94832f4320d1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8c2FsbW9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
                                alt="三文鱼"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-green">欧米伽3</div>
                                <div class="food-name">三文鱼</div>
                                <div class="food-desc">含优质蛋白和丰富的欧米伽-3脂肪酸，有助于胎儿大脑发育。</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bGVhbiUyMG1lYXR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
                                alt="瘦肉"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-green">铁质丰富</div>
                                <div class="food-name">瘦肉</div>
                                <div class="food-desc">含优质蛋白和丰富的铁质，有助于预防缺铁性贫血。</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 限制食物 -->
                <h2 class="section-title">应当限制</h2>

                <div class="food-category">
                    <div class="category-header">
                        <div class="category-icon" style="background-color: #ff5252">
                            <i class="fas fa-ban"></i>
                        </div>
                        <div class="category-name">尽量避免的食物</div>
                    </div>
                    <div class="food-list">
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1544782753-8d9da0ec5d8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8YWxjb2hvbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
                                alt="酒精"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-red">严格禁止</div>
                                <div class="food-name">酒精饮品</div>
                                <div class="food-desc">可能干扰叶酸代谢，增加流产风险，影响卵子质量。</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1521302080334-4bebac2763a6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y29mZmVlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
                                alt="咖啡"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-red">限制摄入</div>
                                <div class="food-name">咖啡因</div>
                                <div class="food-desc">过量摄入可能增加流产风险，每天限制在200毫克以下。</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img
                                src="https://images.unsplash.com/photo-1630384060421-cb20d0e557ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8ZnJpZWQlMjBmb29kfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
                                alt="油炸食品"
                                class="food-image"
                            />
                            <div class="food-info">
                                <div class="tag-tip bg-light-red">减少摄入</div>
                                <div class="food-name">油炸食品</div>
                                <div class="food-desc">含有大量反式脂肪，可能影响胰岛素敏感性和卵巢功能。</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 每日饮食建议 -->
                <h2 class="section-title">每日饮食建议</h2>
                <div class="food-category">
                    <div class="food-list">
                        <div class="food-item">
                            <div class="food-info">
                                <div class="food-name">早餐</div>
                                <div class="food-desc">全麦吐司+煮鸡蛋+牛奶+蓝莓</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <div class="food-info">
                                <div class="food-name">上午加餐</div>
                                <div class="food-desc">坚果混合物(核桃、杏仁等)</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <div class="food-info">
                                <div class="food-name">午餐</div>
                                <div class="food-desc">糙米饭+菠菜+蒸鱼+豆腐汤</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <div class="food-info">
                                <div class="food-name">下午加餐</div>
                                <div class="food-desc">酸奶+蓝莓</div>
                            </div>
                        </div>
                        <div class="food-item">
                            <div class="food-info">
                                <div class="food-name">晚餐</div>
                                <div class="food-desc">燕麦粥+三文鱼+西兰花+胡萝卜</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 关键营养素指南 -->
            <h2 class="section-title">关键营养素指南</h2>

            <div class="nutrient-card">
                <div class="nutrient-header">
                    <div class="nutrient-title">
                        <div class="nutrient-title-icon" style="background-color: #8bc34a">
                            <i class="fas fa-leaf"></i>
                        </div>
                        <div class="nutrient-name">
                            叶酸 <span class="importance-badge importance-high">极重要</span>
                        </div>
                    </div>
                    <div class="nutrient-toggle">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="nutrient-body active">
                    <div class="nutrient-info">
                        <div class="nutrient-label">重要性：</div>
                        <div class="nutrient-value">预防胎儿神经管缺陷，降低流产风险，提高受孕几率</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">建议摄入：</div>
                        <div class="nutrient-value">备孕期每日400-800微克，建议口服叶酸补充剂</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">食物来源：</div>
                        <div class="nutrient-value">
                            <div class="food-source-list">
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>菠菜</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>西兰花</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>芦笋</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>豆类</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>橙子</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>全谷物</div>
                            </div>
                        </div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">最佳摄入：</div>
                        <div class="nutrient-value">
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 90%; background-color: #8bc34a"></div>
                            </div>
                            <div class="text-xs text-gray-500">建议在备孕前3个月开始补充</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="nutrient-card">
                <div class="nutrient-header">
                    <div class="nutrient-title">
                        <div class="nutrient-title-icon" style="background-color: #ff9800">
                            <i class="fas fa-fish"></i>
                        </div>
                        <div class="nutrient-name">
                            欧米伽-3脂肪酸 <span class="importance-badge importance-medium">很重要</span>
                        </div>
                    </div>
                    <div class="nutrient-toggle">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="nutrient-body">
                    <div class="nutrient-info">
                        <div class="nutrient-label">重要性：</div>
                        <div class="nutrient-value">促进卵子质量，支持胎儿脑部和视网膜发育，降低早产风险</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">建议摄入：</div>
                        <div class="nutrient-value">每天至少250-500毫克EPA和DHA</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">食物来源：</div>
                        <div class="nutrient-value">
                            <div class="food-source-list">
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>三文鱼</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>沙丁鱼</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>鲭鱼</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>亚麻籽</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>核桃</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>奇亚籽</div>
                            </div>
                        </div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">最佳摄入：</div>
                        <div class="nutrient-value">
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 75%; background-color: #ff9800"></div>
                            </div>
                            <div class="text-xs text-gray-500">每周食用脂肪鱼类2-3次</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="nutrient-card">
                <div class="nutrient-header">
                    <div class="nutrient-title">
                        <div class="nutrient-title-icon" style="background-color: #e91e63">
                            <i class="fas fa-tint"></i>
                        </div>
                        <div class="nutrient-name">
                            铁 <span class="importance-badge importance-medium">很重要</span>
                        </div>
                    </div>
                    <div class="nutrient-toggle">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="nutrient-body">
                    <div class="nutrient-info">
                        <div class="nutrient-label">重要性：</div>
                        <div class="nutrient-value">预防贫血，支持胎儿脑部发育，提高受孕几率</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">建议摄入：</div>
                        <div class="nutrient-value">备孕期女性每日18毫克</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">食物来源：</div>
                        <div class="nutrient-value">
                            <div class="food-source-list">
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>瘦红肉</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>贝类</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>豆腐</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>菠菜</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>豆类</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>全谷物</div>
                            </div>
                        </div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">吸收小贴士：</div>
                        <div class="nutrient-value">与维生素C同时摄入可提高铁的吸收率，如肉类配柑橘类水果</div>
                    </div>
                </div>
            </div>

            <div class="nutrient-card">
                <div class="nutrient-header">
                    <div class="nutrient-title">
                        <div class="nutrient-title-icon" style="background-color: #4caf50">
                            <i class="fas fa-bone"></i>
                        </div>
                        <div class="nutrient-name">钙 <span class="importance-badge importance-normal">重要</span></div>
                    </div>
                    <div class="nutrient-toggle">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="nutrient-body">
                    <div class="nutrient-info">
                        <div class="nutrient-label">重要性：</div>
                        <div class="nutrient-value">支持骨骼健康，帮助肌肉功能和神经传导</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">建议摄入：</div>
                        <div class="nutrient-value">备孕期女性每日1000毫克</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">食物来源：</div>
                        <div class="nutrient-value">
                            <div class="food-source-list">
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>牛奶</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>酸奶</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>奶酪</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>豆腐</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>西兰花</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>小鱼干</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="nutrient-card">
                <div class="nutrient-header">
                    <div class="nutrient-title">
                        <div class="nutrient-title-icon" style="background-color: #9c27b0">
                            <i class="fas fa-sun"></i>
                        </div>
                        <div class="nutrient-name">
                            维生素D <span class="importance-badge importance-normal">重要</span>
                        </div>
                    </div>
                    <div class="nutrient-toggle">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="nutrient-body">
                    <div class="nutrient-info">
                        <div class="nutrient-label">重要性：</div>
                        <div class="nutrient-value">促进钙吸收，支持免疫系统，可能影响生育能力</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">建议摄入：</div>
                        <div class="nutrient-value">每日600-800国际单位(IU)</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">食物来源：</div>
                        <div class="nutrient-value">
                            <div class="food-source-list">
                                <div class="food-source-item">
                                    <i class="fas fa-circle food-source-icon"></i>阳光照射
                                </div>
                                <div class="food-source-item">
                                    <i class="fas fa-circle food-source-icon"></i>脂肪鱼类
                                </div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>蛋黄</div>
                                <div class="food-source-item">
                                    <i class="fas fa-circle food-source-icon"></i>强化乳制品
                                </div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>蘑菇</div>
                            </div>
                        </div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">特别提示：</div>
                        <div class="nutrient-value">阳光是最佳来源，建议每天晒15-20分钟温和阳光</div>
                    </div>
                </div>
            </div>

            <div class="nutrient-card">
                <div class="nutrient-header">
                    <div class="nutrient-title">
                        <div class="nutrient-title-icon" style="background-color: #3f51b5">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="nutrient-name">锌 <span class="importance-badge importance-normal">重要</span></div>
                    </div>
                    <div class="nutrient-toggle">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="nutrient-body">
                    <div class="nutrient-info">
                        <div class="nutrient-label">重要性：</div>
                        <div class="nutrient-value">支持卵子健康发育，促进细胞分裂，提高受孕几率</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">建议摄入：</div>
                        <div class="nutrient-value">备孕期女性每日8-11毫克</div>
                    </div>
                    <div class="nutrient-info">
                        <div class="nutrient-label">食物来源：</div>
                        <div class="nutrient-value">
                            <div class="food-source-list">
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>牡蛎</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>红肉</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>家禽</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>豆类</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>坚果</div>
                                <div class="food-source-item"><i class="fas fa-circle food-source-icon"></i>全谷物</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                // 营养素卡片展开/收起交互
                document.addEventListener('DOMContentLoaded', function () {
                    const nutrientHeaders = document.querySelectorAll('.nutrient-header');

                    nutrientHeaders.forEach((header) => {
                        header.addEventListener('click', function () {
                            const parent = this.parentElement;
                            const body = parent.querySelector('.nutrient-body');
                            const icon = this.querySelector('.nutrient-toggle i');

                            // 切换显示状态
                            body.classList.toggle('active');

                            // 更新图标
                            if (body.classList.contains('active')) {
                                icon.classList.remove('fa-chevron-down');
                                icon.classList.add('fa-chevron-up');
                            } else {
                                icon.classList.remove('fa-chevron-up');
                                icon.classList.add('fa-chevron-down');
                            }
                        });
                    });
                });
            </script>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-calendar-alt text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-utensils text-xl mb-1"></i>
                    <span>饮食指南</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
